<template>
    <div>
        <div>
            <div class="m-25 mt-65">
                <div class="normal-box-mod">
                    <div class="normal-box-hd clearfix">
                        <div class="normal-box-title">
                            <div class="decorate-square"></div>
                            <h2>回收记录列表</h2>
                        </div>
                    </div>
                    <div class="normal-box-bd">
                        <div class="normal-list-page-mod">
                            <div class="mb-2"
                                 style="margin-bottom:40px">
                                <!-- <Col span="5">
                                <sele @ProvinceData="childByValue1"></sele>
                                </Col> -->
                                <Col span="3"
                                     class="mr-10">
                                <Select placeholder="请选择回收数据状态"
                                        v-model="queryData.state"
                                        :clearable=true>
                                    <Option v-for="item in level1Modal.dataStatus"
                                            :value="item.value"
                                            :key="item.value">{{ item.label }}
                                    </Option>
                                </Select>
                                </Col>
                                <Col span="3"
                                     class="mr-10">
                                <Input v-model="queryData.companyName"
                                       placeholder="请输入回收企业名称"
                                       clearable />
                                </col>
                                <Col span="3"
                                     class="mr-10">
                                <Input v-model="queryData.siteName"
                                       placeholder="请输入回收网点名称"
                                       clearable />
                                </col>
                                <Col span="3"
                                     class="mr-10">
                                <Input v-model="queryData.cardNo"
                                       placeholder="请输入卡号"
                                       clearable />
                                </col>
                                <Col span="5">
                                <sele @ProvinceData="childByValue"></sele>
                                </Col>
                                <Col span="2">

                                <DatePicker type="date"
                                            placement="bottom-end"
                                            placeholder="请选择开始时间"
                                            @on-change="changeStartDate"
                                            :value="queryData.startTime"> </DatePicker>
                                </Col>
                                <Col span="1"
                                     style="width:30px">
                                <p style="text-align:center;line-height: 30px;">至</p>
                                </Col>
                                <Col span="2"
                                     class="mr-10">
                                <DatePicker type="date"
                                            placement="bottom-end"
                                            placeholder="请选择结束时间"
                                            @on-change="changeEndDate"
                                            :value="queryData.endTime"></DatePicker>
                                </Col>
                                <Button type="primary"
                                        custom-icon="iconfont icon-chaxun"
                                        size="small"
                                        @click="iQueryData">查找</Button>
                            </div>
                            <div class="normal-list-page-bd">
                                <Table :columns="columns"
                                       :data="list.data"
                                       border></Table>
                            </div>
                            <Page :total="queryData.totalRecord"
                                  :current="queryData.page"
                                  :page-size="queryData.limit"
                                  show-total
                                  show-elevator
                                  show-sizer
                                  @on-change="changePage"
                                  @on-page-size-change="changePageSize"
                                  style="text-align: center;" />
                        </div>
                    </div>
                    <Modal v-model="orderDetailVisible">
                        <div class="center">回收订单详情</div>
                        <!-- 表格 cellspacing内边距 cellpadding外边距-->
                        <table cellspacing="0"
                               cellpadding="0"
                               border="1">
                            <!-- thead表头 -->
                            <thead>
                                <tr>
                                    <td>回收物类型名称</td>
                                    <td>单价</td>
                                    <td>重量</td>
                                    <td>积分</td>
                                </tr>
                            </thead>
                            <!-- tbody表体 -->
                            <tbody v-for="(item,index) in orderDetailData">
                                <tr>
                                    <td>{{item.typeName}}</td>
                                    <td>{{item.unitPrice}}</td>
                                    <td>{{item.Num}}</td>
                                    <td>{{item.score}}</td>
                                </tr>
                                <!-- <tr>
                                    <td>纸类</td>
                                     <td>20积分/1公斤</td>
                                    <td>100公斤</td>
                                    <td>10000</td>
                                </tr> -->
                            </tbody>
                        </table>
                        <div slot="footer"></div>
                    </Modal>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ScoreApi from '@/api/recycle/score.js'
import sele from '@/view/test/city.vue'

export default {
	components: {
		sele
	},
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10
				// companyId: ''
			},
			columns: [
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				// {
				// 	title: '回收物品ID',
				// 	key: 'typeId',
				// 	align: 'center'
				// },
				{
					title: '回收物品名称',
					key: 'name',
					align: 'center'
				},
				{
					title: '回收物重量',
					key: 'Num',
					align: 'center'
				},
				{
					title: '回收物对应积分',
					key: 'totalScore',
					align: 'center'
				},
				// {
				// 	title: '回收物品编码',
				// 	key: 'typeCode',
				// 	align: 'center'
				// },
				{
					title: '回收企业',
					key: 'companyName',
					align: 'center'
				},
				{
					title: '回收网点',
					key: 'siteName',
					align: 'center'
				},
				// {
				// 	title: '单价',
				// 	key: 'unit-price',
				// 	align: 'center'
				// },
				// {
				// 	title: '合计重量',
				// 	key: 'totalWeight',
				// 	align: 'center'
				// },
				// {
				// 	title: '合计积分',
				// 	key: 'totalScore',
				// 	align: 'center'
				// },
				{
					title: '数据状态',
					key: 'state',
					align: 'center',
					render: (create, params) => {
						let s = params.row.state
						let color, text
						if (s == true) {
							color = '#5ed71a'
							text = '正常'
						} else if (s == false) {
							color = '#d72c23'
							text = '停用'
						}
						return create(
							'div',
							{
								style: {
									color: color,
									borderRadius: '20px'
								}
							},
							text
						)
					}
				},
				{
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '创建人卡号',
					key: 'cardNo',
					align: 'center'
				},

				{
					title: '添加时间',
					key: 'createTime',
					align: 'center'
				},
				// {
				// 	title: '更新时间',
				// 	key: 'updateTime',
				// 	align: 'center'
				// }
				// {
				// 	title: '状态',
				// 	key: 'state',
				// 	align: 'center',
				// 	render: (create, params) => {
				// 		let s = params.row.state
				// 		let color, text
				// 		if (s == 1) {
				// 			color = '#5ed71a'
				// 			text = '正常'
				// 		} else {
				// 			color = '#d72c23'
				// 			text = '停止运行'
				// 		}
				// 		return create(
				// 			'div',
				// 			{
				// 				style: {
				// 					color: color,
				// 					borderRadius: '20px'
				// 				}
				// 			},
				// 			text
				// 		)
				// 	}
				// },
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					render: (h, params) => {
						// 		// 动态渲染组件
						return h('div', { class: 'action-group' }, [
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '查看订单详情'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'success',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showOrderDetail(
														params.row.id
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'ios-eye-outline',
													size: 18
												}
											})
										]
									)
								]
							)
						])
					}
				}
			],
			list: {
				data: []
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {},
				ruleValidate: {
					basicNum: [
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					],
					basicScore: [
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					]
				},
				companyAdminOptions: [
					// {
					// 	value: 4,
					// 	label: '杭州拱墅区再生资源回收有限公司'
					// },
				],
				adminType: [
					{
						value: 1,
						label: '企业管理员'
					},
					{
						value: 2,
						label: '网点管理员'
					},
					{
						value: 3,
						label: '网点回收员'
					},
					{
						value: 4,
						label: '网点清运人员'
					}
				],
				options: [
					{
						value: 'true',
						label: '正常'
					},
					{
						value: 'false',
						label: '停用'
					}
				],
				dataStatus: [
					{
						value: 1,
						label: '数据正常'
					},
					{
						value: 2,
						label: '数据异常'
					},
					{
						value: 3,
						label: '数据作废'
					}
				],
				recyclingCompanyNameFlag: false,
				companyNameFlag: false
			},
			levelSiteModal: {
				modal: false,
				title: '回收站点管理员',
				formData: {},
				flag: false
			},
			adminFlag: false,
			level2Modal: {
				modal2: false,
				title: '添加回收物品积分',
				formData: {},
				ruleValidate: {
					unit: [
						{
							required: true,
							message: '请输入计量单位',
							trigger: 'blur'
						}
					],
					basicNum: [
						{
							required: true,
							message: '请输入基础计数',
							trigger: 'blur'
						},
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					],
					basicScore: [
						{
							required: true,
							message: '请输入对应积分',
							trigger: 'blur'
						},
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的对应积分',
							trigger: 'blur'
						}
					]
				}
			},
			orderDetailVisible: false,
			orderDataId: {},
			orderDetailData: []
		}
	},
	mounted() {
		this.getPageList()
	},
	created() {
		this.defaultDate()
	},
	computed: {},
	methods: {
		// 查看订单详情
		showOrderDetail(id) {
			this.orderDetailVisible = true
			this.orderDataId.orderId = id
			this.getOrderDetailData()
		},
		// 查看订单详情
		async getOrderDetailData() {
			let data = (await ScoreApi.getOrderDetail(this.orderDataId)).data
			// this.orderDetailData = data
			console.log(this.orderDetailData, '11111111')
			var newData = data
			// 处理数据
			var a = newData.map(function(item) {
				var unitPrice =
					item.basicScore + '积分' + '/' + item.basicNum + item.unit
				var Num = item.num + '' + item.unit
				return {
					...item,
					unitPrice: unitPrice,
					Num: Num
				}
			})
			this.orderDetailData = a
			console.log(this.orderDetailData, '222222')
		},

		async getPageList() {
			this.queryData.totalRecord = undefined
			let data = (await ScoreApi.getOrderList(this.queryData)).data
			var newData = data.list
			var a = newData.map(function(item) {
				var unitPrice =
					item.basicScore + '/' + item.basicNum + item.unit
				var Num = item.totalWeight + ' ' + item.unit
				return {
					...item,
					'unit-price': unitPrice,
					Num: Num
				}
			})
			this.list.data = a
			console.log(this.list.data, '11111111111')
			this.queryData.limit = data.pageSize
			this.queryData.page = data.pageNum
			this.queryData.totalRecord = data.totalRecord
		},
		//地区赋值
		childByValue(data) {
			this.queryData.provId = data.provid || ''
			this.queryData.cityId = data.cityid || ''
			this.queryData.distId = data.distid || ''
			this.queryData.strtId = data.strtid || ''
			this.queryData.commId = data.commid || ''
			this.queryData.comminId = data.comminid || ''
			console.log(this.queryData, '11111111111111111')
		},
		changeStartDate(val) {
			this.queryData.startTime = val
		},
		changeEndDate(val) {
			this.queryData.endTime = val
		},
		// 查询按钮地区赋值
		childByValue1(data) {
			this.queryData.provId = data.provid || ''
			this.queryData.cityId = data.cityid || ''
			this.queryData.distId = data.distid || ''
			this.queryData.strtId = data.strtid || ''
			this.queryData.commId = data.commid || ''
			this.queryData.comminId = data.comminid || ''
		},
		// 初始化默认时间
		defaultDate() {
			var date = new Date()
			var year = date.getFullYear().toString()
			var month =
				date.getMonth() + 1 < 10
					? '0' + (date.getMonth() + 1).toString()
					: (date.getMonth() + 1).toString()
			var day =
				date.getDate() < 10
					? '0' + date.getDate().toString()
					: date.getDate().toString()
			var da = new Date(date.getFullYear(), month, 0).getDate()
			da < 10 ? '0' + da.toString() : da.toString()
			var beg = year + '-' + month + '-01'
			// var beg = year + '-' + month + '-' + day
			var end = year + '-' + month + '-' + day
			this.queryData.startTime = beg //将值设置给插件绑定的数据
			this.queryData.endTime = end
		},
		iQueryData() {
			this.queryData.page = 1
			if (this.queryData.cardNo == '') {
				this.queryData.cardNo = undefined
			}
			console.log(this.queryData, 'this.queryData')
			this.getPageList()
		},
		changePage(page) {
			this.queryData.page = page
			this.getPageList()
		},
		changePageSize(pageSize) {
			this.queryData.limit = pageSize
			this.getPageList()
		}
	}
}
</script>
<style scoped>
.center {
	text-align: center;
	font-size: 20px;
	font-weight: bolder;
}
table {
	width: 100%;
	/* margin: 0 auto;居中 */
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}
table tr td {
	width: 25%;
	height: 50px;
}
</style>
